<template>
  <lay-layer v-model="visible" :shade="true" :shadeClose="false" shadeOpacity="0.2" :area="['400px', '300px']" :success="init" :btn="action">
    <div style="padding: 20px">
<!--      lg sm xs-->
      <lay-select v-model="changeRoleBo.roleId" :options="roleSimpleList" style="width: 100%">
      </lay-select>
    </div>
  </lay-layer>
</template>
<script setup lang="ts">
import useFxwForm from "@/hooks/useFxwForm";
import {reactive, ref} from 'vue'
import {getMyRoleList,changeMyRole} from "@/api/module/myRole";
import router from "@/router";
import {buildRoleOptions1} from '@/library/objectUtil'
import useUserObject from "@/hooks/useUserObject";

const {userInfo} = useUserObject();
const {changeVisible,visible} = useFxwForm()

const changeRoleBo = reactive({
  roleId: 0
});
let roleSimpleList = ref<Array<{label: string,value:string}>>([])
const init = function () {
  roleSimpleList.value = []
  getMyRoleList().then(res=>{
    if (res.code == 200 && res.data) {
      roleSimpleList.value = buildRoleOptions1(res.data)
      changeRoleBo.roleId = userInfo.value.roleId;
    }
  })
};

// 切换角色
const action = ref([
  {
    text: "确认",
    callback: () => {
      if (changeRoleBo.roleId !== userInfo.value.roleId){
        changeMyRole(changeRoleBo).then(res=>{
          if (res.code === 200) {
            router.go(0)
          }
        })
      }
      changeVisible();
    }
  },
  {
    text: "取消",
    callback: () => {
      changeVisible();
    }
  }
])

defineExpose({
  changeVisible
})
</script>

<style scoped>


</style>